<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="广告标题">
              <a-input placeholder="请输入广告标题" v-model="queryParam.title"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="发布状态">
              <j-dict-select-tag placeholder="全部" v-model="queryParam.sendStatus" dictCode="notice_send_status"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="展现形式">
              <j-dict-select-tag placeholder="全部" v-model="queryParam.type" dictCode="notice_click_type"/>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    </div>

    <!-- table区域-begin -->
    <div>

      <a-table ref="table" size="middle" :scroll="{x:true}" bordered rowKey="id" :columns="columns"
               :dataSource="dataSource" :pagination="ipagination"
               :loading="loading" class="j-table-force-wrap" @change="handleTableChange">


        <template slot="sendStatusSlot" slot-scope="text">
          <a-tag color="orange" v-if="text==1">
            暂存
          </a-tag>
          <a-tag color="green" v-if="text==2">
            发布
          </a-tag>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="55px" alt="" :preview="text"
               style="max-width:80px;font-size: 12px;font-style: italic;"/>
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)" v-if="record.sendStatus == 1">编辑</a>
          <a @click="handleLook(record)" v-if="record.sendStatus == 2">详情</a>

          <a-divider type="vertical" v-if="record.sendStatus == 1"/>

          <a-popconfirm title="确定发布吗?" @confirm="() => sendNotice(record)" v-if="record.sendStatus == 1">
            <a>发布</a>
          </a-popconfirm>
        </span>

      </a-table>
    </div>

    <cms-notice-templet-modal ref="modalForm" @ok="modalFormOk"></cms-notice-templet-modal>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import CmsNoticeTempletModal from './modules/CmsNoticeTempletModal'
import {filterMultiDictText} from '@/components/dict/JDictSelectUtil'
import {getAction} from '@/api/manage'

export default {
  name: 'CmsNoticeTempletList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    CmsNoticeTempletModal
  },
  data() {
    return {
      description: 'cms_notice_templet管理页面',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '主标题',
          align: "center",
          dataIndex: 'title'
        },
        {
          title: '副标题',
          align: "center",
          width: 200,
          dataIndex: 'content'
        },
        {
          title: '展示图',
          align: "center",
          dataIndex: 'imgUrl',
          scopedSlots: {customRender: 'imgSlot'}
        },
        {
          title: '状态',
          align: "center",
          dataIndex: 'sendStatus',
          scopedSlots: {customRender: 'sendStatusSlot'}
        },
        {
          title: '展现方式',
          align: "center",
          dataIndex: 'type_dictText'
        },
        {
          title: '创建时间',
          align: "center",
          dataIndex: 'createTime'
        },
        {
          title: '发布时间',
          align: "center",
          dataIndex: 'sendTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          fixed: "right",
          width: 147,
          scopedSlots: {customRender: 'action'}
        }
      ],
      url: {
        list: "/common/cmsNoticeTemplet/list",
        delete: "/common/cmsNoticeTemplet/delete",
        deleteBatch: "/common/cmsNoticeTemplet/deleteBatch",
        exportXlsUrl: "/common/cmsNoticeTemplet/exportXls",
        importExcelUrl: "common/cmsNoticeTemplet/importExcel",

      },
      dictOptions: {},
    }
  },
  created() {
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    initDictConfig() {
    },
    sendNotice(record) {
      getAction('/common/cmsNoticeTemplet/sendNotice/' + record.id).then(res => {
        if (res.success) {
          this.loadData()
        } else {
          this.$message.success(res.message)
        }
      })
    },
    handleLook(record) {
      this.$refs.modalForm.look(record);
      this.$refs.modalForm.title = "详情";
      this.$refs.modalForm.disableSubmit = true;
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>